<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Timer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .timer-display {
            font-size: 4em;
            margin: 20px 0;
            padding: 20px 40px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .controls {
            display: flex;
            gap: 10px;
        }

        button {
            padding: 10px 20px;
            font-size: 1em;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s;
        }

        #startBtn {
            background-color: #4CAF50;
            color: white;
        }

        #pauseBtn {
            background-color: #ff9800;
            color: white;
        }

        #resetBtn {
            background-color: #f44336;
            color: white;
        }

        button:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
    </style>
</head>

<body>
    <h1>Simple Timer</h1>
    <div class="timer-display" id="timer">00:00:00</div>
    <div class="controls">
        <button id="startBtn">Start</button>
        <button id="pauseBtn" disabled>Pause</button>
        <button id="resetBtn">Reset</button>
    </div>

    <script>
        // 计时器状态变量
        let startTime = 0;
        let elapsedTime = 0;
        let animationId = null;
        let isRunning = false;

        // DOM元素
        const timerDisplay = document.getElementById('timer');
        const startBtn = document.getElementById('startBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const resetBtn = document.getElementById('resetBtn');

        // 格式化时间显示 (毫秒 -> HH:MM:SS)
        function formatTime(ms) {
            const totalSeconds = Math.floor(ms / 1000);
            const hours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0');
            const minutes = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0');
            const seconds = (totalSeconds % 60).toString().padStart(2, '0');
            return `${hours}:${minutes}:${seconds}`;
        }

        // 计时函数
        /** 参数 currentTime: 由 requestAnimationFrame 自动传入，代表当前函数执行时的高精度时间戳（单位：毫秒），
         * 类似于 performance.now() 的返回值
        */
        function updateTimer(currentTime) {
            console.info('currentTime', currentTime)
            if (isRunning) {
                /**时间计算逻辑：
                    elapsedTime（已流逝时间）= 现在时间（currentTime）- 计时器开始时间（startTime）
                 */
                elapsedTime = currentTime - startTime;
                timerDisplay.textContent = formatTime(elapsedTime);
                /*
                requestAnimationFrame(updateTimer) 会告诉浏览器：「下一次重绘之前，请调用 updateTimer 函数」。
                这会形成一个循环：每次执行 updateTimer 时，都会预约下一次执行，从而实现持续计时
                */
                animationId = requestAnimationFrame(updateTimer);
            }
        }

        // 事件监听器
        startBtn.addEventListener('click', () => {
            if (!isRunning) {
                startTime = performance.now() - elapsedTime;
                isRunning = true;
                animationId = requestAnimationFrame(updateTimer);
                startBtn.disabled = true;
                pauseBtn.disabled = false;
            }
        });

        pauseBtn.addEventListener('click', () => {
            isRunning = false;
            cancelAnimationFrame(animationId);
            startBtn.disabled = false;
            pauseBtn.disabled = true;
        });

        resetBtn.addEventListener('click', () => {
            isRunning = false;
            cancelAnimationFrame(animationId);
            startTime = 0;
            elapsedTime = 0;
            timerDisplay.textContent = '00:00:00';
            startBtn.disabled = false;
            pauseBtn.disabled = true;
        });
    </script>
</body>

</html>